<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/resource/css/bootstrap.css">
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
</head>
<body>
<form action="" method="post">
<div class="container" style="margin-top:25px">
<h3 align="center">发薪系统</h3> 
<hr>
发薪单名称:<input type="text" name="name" value="${pay.name }">
公司: <select name="company.id" onchange="getGroups(this.value,'business.id')">
				 <option value="">-请选择-</option>
				<%--<c:forEach items="${list }" var="l">
				<option value=""></option>
				</c:forEach> --%>
			</select>
事业部: <select name="business.id" onchange="getGroups(this.value,'dept.id')">
				<option value="">-请选择-</option>
			</select>
部门: <select name="dept.id">
				<option value="">-请选择-</option>
			</select>
		<button>查询</button>
		<br>
<a href="toAdd">添加</a>
<table class="table">
  <thead>
    <tr>
      <th scope="col">序号</th>
      <th scope="col">发薪单名称</th>
      <th scope="col">公司</th>
      <th scope="col">事业部</th>
      <th scope="col">部门</th>
      <th scope="col">发放总金额</th>
      <th scope="col">创建时间</th>
      <th scope="col">照片</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <c:forEach items="${pg.list }" var="l">
   <tbody>
    <tr>
      <th scope="row">${l.id }</th>
      <td>${l.name }</td>
      <td>${l.company.name }</td>
      <td>${l.business.name }</td>
      <td>${l.dept.name }</td>
      <td>${l.account }</td>
      <td>
      <fmt:formatDate value="${l.createtime }" pattern="yyyy年MM月dd日"/>
      </td>
      <td>
      <img alt="" src="${l.bills }" width="50px" height="50px">
      </td>
      <td>
      	<a href="toUpdate?id=${l.id }">修改</a>
      </td>
    </tr>
    </tbody>
  </c:forEach>
  <jsp:include page="page.jsp"></jsp:include>
</table>
</div>
</form>
</body>
<script type="text/javascript">
//三级联动
$(function(){
	var companyId = '${pay.company.id }'
	var businessId = '${pay.business.id }'
	var deptId = '${pay.dept.id }'
	getGroups(0,'company.id',companyId);
	getGroups(companyId,'business.id',businessId);
	getGroups(businessId,'dept.id',deptId);
})
function getGroups(pid,name,hxid){
	//发起ajax请求
	$.post("getGroups",{"pid":pid},function(obj){
		if(name == 'company.id'){
			$("[name = 'business.id']").html("<option value=''>-请选择-</option>")
		}
		if(name == 'business.id'){
			$("[name = 'business.id']").html("<option value=''>-请选择-</option>")
		}
		if(name == 'dept.id'){
			$("[name = 'dept.id']").html("<option value=''>-请选择-</option>")
		}
		
		for ( var i in obj) {
		$("[name = '"+name+"']").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")
		}
		$("[name = '"+name+"']").val(hxid)
	},"json")
}
</script>
</html>